﻿@inject IFlatProductsProvider FlatProductService

<div class="demo-description mw-1100" id="HorizontalScrolling">
    <h2><DemoNavLink Link="GridPagingAndScrolling#HorizontalScrolling" />Data Grid - Horizontal Scrolling</h2>
    <p>
        This demo module illustrates how to enable horizontal scrolling in the DevExpress <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1">Data Grid</a> for Blazor.
    </p>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.HorizontalScrollBarMode">DxDataGrid.HorizontalScrollBarMode</a> property to specify the horizontal scrollbar’s display mode:
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.ScrollBarMode">Auto</a> - The scrollbar is automatically shown when the size of the component content exceeds the size of the component itself.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.ScrollBarMode">Hidden</a> - The scrollbar is hidden.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.ScrollBarMode">Visible</a> - The scrollbar is visible.</li>
    </ul>
</div>

@if (DataSource == null) {
    <p><em>Loading...</em></p>
} else {

    <DxDataGrid Data="@DataSource"
            HorizontalScrollBarMode="ScrollBarMode.Visible"
            PagerNavigationMode="PagerNavigationMode.NumericButtons"
            CssClass="mw-1100">

        <DxDataGridColumn Field="@nameof(ProductFlat.Id)" Caption="ID" Width="50px">
        </DxDataGridColumn>

        <DxDataGridColumn Field="@nameof(ProductFlat.ProductName)" Caption="Product Name" Width="350px">
        </DxDataGridColumn>

        <DxDataGridColumn Field="@nameof(ProductFlat.Availability)" Caption="Availability" Width="110px">
            <DisplayTemplate>
                @{
                    var id = Guid.NewGuid().ToString();
                    var inStock = (context as ProductFlat).Availability;
                    <DxCheckBox Id="@id" Checked="@inStock" Enabled="false">
                        @if(inStock) {
                        <label class="form-check-label text-success" for="@id"><span>In stock</span></label>
                        } else {
                        <label class="form-check-label text-danger" for="@id"><span>Sold out</span></label>
                        }
                    </DxCheckBox>
                }
            </DisplayTemplate>
        </DxDataGridColumn>

        <DxDataGridColumn Field="@nameof(ProductFlat.Category)" Caption="Category" Width="350px"></DxDataGridColumn>
        <DxDataGridColumn Field="@nameof(ProductFlat.Subcategory)" Caption="Subcategory" Width="350px"></DxDataGridColumn>
        <DxDataGridDateEditColumn Field="@nameof(ProductFlat.LastUpdated)" Caption="Last Updated" Width="350px"></DxDataGridDateEditColumn>

    </DxDataGrid>

    <CodeSnippet_Grid_Scrolling_Horizontal></CodeSnippet_Grid_Scrolling_Horizontal>
}

@code {
    IEnumerable<ProductFlat> DataSource;

    protected override async Task OnInitializedAsync()
    {
        DataSource = await FlatProductService.LoadAsync();
    }
}
